<script setup>
const setInverted = () => {}
</script>

<template>
  <!-- v-if="deviceStore.deviceList.length" -->
  <view class="deviceItem">
    <text class="types">一体机</text>
    <view class="item" v-for="item in 2" :key="item.id">
      <image class="item-image" :src="item.img" mode="scaleToFill" />
      <view class="info">
        <p class="title">{{ item.name }}</p>
        <p class="text">产品型号: {{ item.model }}</p>
        <p class="text">设备SN号: {{ item.deviceSN }}</p>
        <p class="text">绑定时间: 2024-01-30 16:45:07</p>
      </view>
      <view class="state">
        <view class="tag" @click="setInverted">已绑定</view>
      </view>
    </view>
  </view>
  <!-- v-else -->
  <view class="unDeviceItem">
    <image class="image" src="../../../static/device/nodevice.png" mode="scaleToFill" />
    <p>暂无绑定设备</p>
  </view>
</template>

<style lang="scss">
.unDeviceItem {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 400rpx;
  color: #888888;
  .image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
}
.deviceItem {
  padding: 20rpx 0;
  .types {
    padding: 20rpx;
  }
  .item {
    display: flex;
    margin-top: 20rpx;
    padding: 20rpx;
    border-radius: 15rpx;
    background-color: #fff;
    .item-image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .info {
    width: 340rpx;
    margin-left: 20rpx;
    color: #888888;
    font-size: 22rpx;
    .title {
      font-size: 30rpx;
      color: #4a4a4a;
      font-weight: 700;
      margin-bottom: 15rpx;
    }
    .text {
      margin-bottom: 10rpx;
    }
  }
  .state {
    display: flex;
    justify-content: center;
    align-items: center;
    .tag {
      font-size: 24rpx;
      color: #f0d398;
      padding: 10rpx 30rpx;
      border-radius: 50rpx;
      background-color: #fdf5e8;
    }
  }
}
</style>
